/*
 * @Author: shiguo
 * @Date: 2022-04-24 13:56:47
 * @LastEditors: shiguo
 * @LastEditTime: 2023-04-25 17:11:14
 * @FilePath: /@aks-dev/taro-h5/lib/TextAreaView/index.tsx
 */
import React from 'react'
import { View, Text} from '@tarojs/components'
import {TextArea} from 'antd-mobile'

import type { TextAreaViewProps } from '../../types/TextAreaView'

export const TextAreaView:
    React.ForwardRefExoticComponent<
        React.PropsWithoutRef<Partial<TextAreaViewProps>>
        & React.RefAttributes<TextAreaViewProps.RefAttributes>
    >
    = React.forwardRef((props, ref) => {
        const { defaultValue, placeholder, maxLength = 200, on, ...rest } = props

        const [value, setValue] = React.useState<string | undefined>(defaultValue)

        React.useLayoutEffect(() => {
            setValue(defaultValue)
        }, [defaultValue])


        React.useImperativeHandle<unknown, TextAreaViewProps.RefAttributes>(ref, () => ({
            value: value,
        }), [value])



        return (
            <View style={Object.assign({},styles.container, rest.style)}>


                <TextArea
                    style={{...styles.textInput,...({'--placeholder-color':'#999999','--font-size':'14px'}),...rest.inputStyle}}
                    value={value}
                      autoSize
                    defaultValue={props.defaultValue}
                    onChange={e => {
                        setValue(e);
                        on && on(e);
                    }}
                    maxLength={props.maxLength}
                    placeholder={placeholder}
                    disabled={props.disabled}
                />

                <View style={styles.corner}>
                    <Text style={styles.limit}>
                        <Text style={{ ...styles.limit, color: value && value?.length > (maxLength - 5) ? 'red' : '#AFAFAF' }}>{value?.length || 0}</Text>
                        /
                        {maxLength}
                    </Text>
                </View>
            </View>
        )
    })



const styles :Record<string,React.CSSProperties>= {
    container: {
        display:'flex',
        flexDirection:'column',
        minHeight: '180px',
        backgroundColor: 'white',
        // position:'relative'
    },
    textInput: {
        flexGrow: 1,
        margin: '15px',
        // marginBottom: '8px',
        width:'calc(100% - 30px)',
        fontSize: '14px',
        color:'#333333',
        // backgroundColor: 'red'
    },
    corner: {
        // position: 'absolute',
        // backgroundColor:'cyan',
        margin:'0 15px',
        marginBottom: '8px',
        display:'flex',justifyContent:'flex-end'
    },
    limit: {
        textAlign: 'right',
        fontSize: '10px',
        color: '#AFAFAF',
    },


}